<template>
  <el-header height="70">
    <div class="logout">
      <i class="iconfont icon-tuichu" @click="logout"></i>
      <el-tooltip :content="userInfo.nickName" placement="left">
        <span class="nickName">{{ userInfo.nickName }}</span>
      </el-tooltip>
    </div>
  </el-header>
</template>

<script>
export default {
  name: "HeaderIndex",
  components: {},
  props: {
    userInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    logout() {
      this.$emit("logout");
    }
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
.el-header {
  background-color: #fff;
  color: #333;
  line-height: 70px;
  padding: 0 60px 0 20px;
  font: 14px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;

  .logout {
    height: 70px;
    .nickName {
      float: right;
      margin-right: 20px;
      width: 100px;
      line-height: 70px;
      text-align: center;
      /* 溢出省略号 */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: default;
      font-weight: 600;
    }
    i.icon-tuichu {
      line-height: 70px;
      float: right;
      cursor: pointer;
    }
  }
}
</style>
